<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'DriverPerformanceChart',
  data() {
    return {
      chartInstance: null,
      driverData: [
        { name: '司机A', performance: 120 },
        { name: '司机B', performance: 200 },
        { name: '司机C', performance: 150 },
        { name: '司机D', performance: 80 },
        { name: '司机E', performance: 300 },
      ],
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    initChart() {
      // 提取司机名称和业绩数据
      const names = this.driverData.map(driver => driver.name);
      const performances = this.driverData.map(driver => driver.performance);

      // 初始化图表
      this.chartInstance = echarts.init(this.$refs.chart);
      this.chartInstance.setOption({
        title: {
          text: '司机业绩排行榜',
          subtext: '单位: 分',
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: names,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '业绩',
            type: 'bar',
            data: performances,
            itemStyle: {
              color: '#61a0a8',
            },
          },
        ],
      });
    },
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
  },
};
</script>

<style scoped>
</style>
